<template>
  <div>
    <div id="fetchingBusinessStation">
      <i-button type="primary" style="margin-bottom:5px;" @click="onAddPickUp">添加接取单</i-button>
      <tablePage ref="containerTab" :api="queryPickUpBypage" :param="tabParam">
        <template slot-scope="props">
          <Table :columns="columnsData" :data="props.data"></Table>
        </template>
      </tablePage>
      <Modal v-model="addPickUpModal" title="添加接取单">
        <Form ref="addPickUpForm" :model="pickUpFormBase" :rules="pickUpDataValidate" :label-width="100">
          <FormItem prop="shipper" label="托运人">
            <Input type="text" v-model="pickUpFormBase.shipper" placeholder="托运人"/>
          </FormItem>
          <FormItem prop="mobile" label="联系方式">
            <Input type="text" v-model="pickUpFormBase.mobile" placeholder="联系方式"/>
          </FormItem>
          <FormItem prop="pick_address" label="取货地址">
            <Input type="text" v-model="pickUpFormBase.pick_address" placeholder="取货地址"/>
          </FormItem>
          <FormItem prop="pm" label="品名">
            <Input type="text" v-model="pickUpFormBase.pm" placeholder="品名"/>
          </FormItem>
          <FormItem prop="send_weight" label="重量">
            <Input type="text" v-model="pickUpFormBase.send_weight" placeholder="重量"/>
          </FormItem>
          <FormItem prop="station_name" label="接回地点名称">
            <Input type="text" v-model="pickUpFormBase.station_name" placeholder="接回地点名称"/>
          </FormItem>
          <FormItem prop="end_station_name" label="到站名称">
            <Input type="text" v-model="pickUpFormBase.end_station_name" placeholder="到站名称"/>
          </FormItem>
          <FormItem prop="end_contacts" label="到站收货人">
            <Input type="text" v-model="pickUpFormBase.end_contacts" placeholder="到站收货人"/>
          </FormItem>
          <FormItem prop="end_mobile" label="到站联系方式">
            <Input type="text" v-model="pickUpFormBase.end_mobile" placeholder="到站联系方式"/>
          </FormItem>
          <FormItem style="float:right;margin-top:-3%;">
            <Button type="primary" @click="addPickUpModal=false">取消</Button>
            <Button type="info" @click="addPickUp()">确定</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
      <Modal v-model="editPickUpModal" title="编辑接取单">
        <Form ref="editPickUpForm" :model="pickUpFormBase" :rules="pickUpDataValidate" :label-width="100">
          <FormItem prop="shipper" label="托运人">
            <Input type="text" v-model="pickUpFormBase.shipper" placeholder="托运人"/>
          </FormItem>
          <FormItem prop="mobile" label="联系方式">
            <Input type="text" v-model="pickUpFormBase.mobile" placeholder="联系方式"/>
          </FormItem>
          <FormItem prop="pick_address" label="取货地址">
            <Input type="text" v-model="pickUpFormBase.pick_address" placeholder="取货地址"/>
          </FormItem>
          <FormItem prop="pm" label="品名">
            <Input type="text" v-model="pickUpFormBase.pm" placeholder="品名"/>
          </FormItem>
          <FormItem prop="send_weight" label="重量">
            <Input type="text" v-model="pickUpFormBase.send_weight" placeholder="重量"/>
          </FormItem>
          <FormItem prop="station_name" label="接回地点名称">
            <Input type="text" v-model="pickUpFormBase.station_name" placeholder="接回地点名称"/>
          </FormItem>
          <FormItem prop="end_station_name" label="到站名称">
            <Input type="text" v-model="pickUpFormBase.end_station_name" placeholder="到站名称"/>
          </FormItem>
          <FormItem prop="end_contacts" label="到站收货人">
            <Input type="text" v-model="pickUpFormBase.end_contacts" placeholder="到站收货人"/>
          </FormItem>
          <FormItem prop="end_mobile" label="到站联系方式">
            <Input type="text" v-model="pickUpFormBase.end_mobile" placeholder="到站联系方式"/>
          </FormItem>
          <FormItem style="float:right;margin-top:-3%;">
            <Button type="primary" @click="editPickUpModal=false">取消</Button>
            <Button type="info" @click="editPickUp()">确定</Button>
          </FormItem>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
      <Modal v-model="dispatchOrderModel" title="派单" @on-ok="dispatchOrder">
        <Form ref="dispatchOrderForm" :model="dispatchOrderData">
          <FormItem prop="receiver_fleets" label="车队：" :label-width="100">
            <CheckboxGroup v-model="dispatchOrderData.fleetIds">
              <Checkbox v-for="item in ownedFleets" :label="item.id" :key="item.id">{{item.login_name}}
              </Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem prop="pickUpId" style="display: none;">
            <Input v-model="dispatchOrderData.pickUpId"/>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>
<script>
  import {
    queryPickUpBypage,
    pickUpSave,
    dispatchToFleetPickUp,
    dispatchCancelToFleetPickUp,
    deletePickUp
  } from '@api/backEnd/fetchingBusiness/index'
  import { getOwnFleet } from '@api/backEnd/station'
  import tablePage from '@components/table/tablePage.vue'

  export default {
    name: 'fetchingBusinessStation',
    data () {
      let curEditId = 0
      let curPickUpId = 0
      let ownedFleets = []
      let addPickUpModal = false
      let editPickUpModal = false
      let dispatchOrderModel = false
      let tabParam = {}
      let dispatchOrderData = {
        fleetIds: [],
        pickUpId: 0
      }
      let pickUpFormBase = {
        pick_address: '',
        shipper: '',
        mobile: '',
        pm: '',
        send_weight: '',
        station_code: '',
        station_name: '',
        end_station_code: '',
        end_station_name: '',
        end_contacts: '',
        end_mobile: ''
      }
      let columnsData = [
        {
          title: '托运人',
          key: 'shipper',
          width: 80
        },
        {
          title: '联系方式',
          key: 'mobile',
          width: 100
        },
        {
          title: '取货地址',
          key: 'pickAddress',
          width: 100
        },
        {
          title: '品名',
          key: 'pm',
          width: 100
        },
        {
          title: '重量',
          key: 'sendWeight',
          width: 80
        },
        {
          title: '接回地点名称',
          key: 'stationName',
          width: 120
        },
        {
          title: '到站名称',
          key: 'endStationName',
          width: 100
        },
        {
          title: '到站收货人',
          key: 'endContacts',
          width: 120
        },
        {
          title: '到站联系方式',
          key: 'endMobile',
          width: 120
        },
        {
          title: '创建时间',
          key: 'createTime',
          width: 120,
          sortable: true,
          sortType: 'desc',
          render: (h, params) => {
            let dateTime = params.row.createTime
            return h('Poptip', {
              props: {
                content: dateTime,
                placement: 'top',
                trigger: 'hover'
              }
            }, dateTime)
          }
        },
        {
          title: '操作',
          minWidth: 150,
          render: (h, params) => {
            if (params.row.state === 1) {
              return h('div', [
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      this.$refs['editPickUpForm'].resetFields()
                      this.curEditId = params.row.id
                      this.pickUpFormBase = {
                        pick_address: params.row.pickAddress,
                        shipper: params.row.shipper,
                        mobile: params.row.mobile,
                        pm: params.row.pm,
                        send_weight: params.row.sendWeight,
                        station_name: params.row.stationName,
                        end_station_name: params.row.endStationName,
                        end_contacts: params.row.endContacts,
                        end_mobile: params.row.endMobile
                      }
                      console.log(params.row)
                      console.log(this.pickUpFormBase)
                      this.editPickUpModal = true
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    'margin-left': '20px'
                  },
                  on: {
                    click: (value, row) => {
                      this.dispatchOrderData.pickUpId = params.row.id
                      this.dispatchOrderModel = true
                    }
                  }
                }, '派单'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    'margin-left': '20px'
                  },
                  on: {
                    click: (value, row) => {
                      this.$Modal.confirm({
                        title: '是否删除接取单',
                        content: '<p>是否删除接取单</p>',
                        onOk: () => {
                          let param = {
                            pickUpId: params.row.id
                          }
                          deletePickUp(param).then(res => {
                            if (res.data.isSuccess === 1) {
                              this.$Message.info('删除成功')
                              this.$refs['containerTab'].dataRefresh()
                            } else {
                              this.$Message.error('删除失败')
                            }
                          })
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            } else {
              return h('div', [
                h('Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    'margin-left': '20px'
                  },
                  on: {
                    click: (value, row) => {
                      this.$Modal.confirm({
                        title: '是否撤回派单',
                        content: '<p>是否撤回已派出的订单</p>',
                        onOk: () => {
                          let param = {
                            pickUpId: params.row.id
                          }
                          dispatchCancelToFleetPickUp(param).then(res => {
                            if (res.data.isSuccess === 1) {
                              this.$Message.info('撤回成功')
                              this.$refs['containerTab'].dataRefresh()
                            } else {
                              this.$Message.error('撤回失败')
                            }
                          })
                        }
                      })
                    }
                  }
                }, '撤回')
              ])
            }
          }
        }
      ]
      let pickUpDataValidate = {
        shipper: [
          { required: true, message: '托运人必填', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '联系方式必填', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '手机号格式不正确！', trigger: 'blur' }
        ],
        pick_address: [
          { required: true, message: '取货地址必填', trigger: 'blur' }
        ],
        pm: [
          { required: true, message: '品名必填', trigger: 'blur' }
        ],
        send_weight: [
          { required: true, message: '重量必填', trigger: 'blur' }
        ],
        station_name: [
          { required: true, message: '接回地点名称必填', trigger: 'blur' }
        ],
        end_station_name: [
          { required: true, message: '到站名称必填', trigger: 'blur' }
        ],
        end_contacts: [
          { required: true, message: '到站收货人必填', trigger: 'blur' }
        ],
        end_mobile: [
          { required: true, message: '到站联系方式必填', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '手机号格式不正确！', trigger: 'blur' }
        ]
      }
      let datas = {
        addPickUpModal,
        editPickUpModal,
        dispatchOrderModel,
        curPickUpId,
        dispatchOrderData,
        pickUpDataValidate,
        tabParam,
        columnsData,
        ownedFleets,
        pickUpFormBase,
        curEditId,
        queryPickUpBypage
      }
      return datas
    },
    computed: {},
    methods: {
      onAddPickUp: function (e) {
        this.$refs['addPickUpForm'].resetFields()
        this.addPickUpModal = true
      },
      addPickUp: function (e) {
        this.$refs['addPickUpForm'].validate((valid) => {
          if (valid) {
            pickUpSave(this.pickUpFormBase).then(res => {
              if (res.data.isSuccess === 1) {
                this.$Message.info('添加成功')
                this.$refs['containerTab'].dataRefresh()
                this.addPickUpModal = false
              } else {
                this.$Message.error('添加失败')
              }
            })
          } else {
            this.$Message.error('数据格式不对')
          }
        })
      },
      editPickUp: function (e) {
        this.$refs['editPickUpForm'].validate((valid) => {
          if (valid) {
            let param = this.pickUpFormBase
            param.id = this.curEditId
            pickUpSave(param).then(res => {
              if (res.data.isSuccess === 1) {
                this.$Message.info('编辑成功')
                this.$refs['containerTab'].dataRefresh()
              } else {
                this.$Message.error('编辑失败')
              }
            })
          } else {
            this.$Message.error('数据格式不对')
          }
        })
      },
      dispatchOrder: function (e) {
        let param = {
          pickUpId: this.dispatchOrderData.pickUpId,
          fleetIds: this.dispatchOrderData.fleetIds.join(',')
        }
        dispatchToFleetPickUp(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.$Message.info('派单成功')
            this.$refs['containerTab'].dataRefresh()
            this.dispatchOrderModel = false
          } else {
            this.$Message.error('派单失败')
          }
        })
      }
    },
    mounted () {
      getOwnFleet().then(res => {
        if (res.data.isSuccess === 1) {
          this.ownedFleets = res.data.data
        }
      })
    },
    components: { tablePage }
  }
</script>
<style scoped>

</style>
